import "./index.scss";
import * as echarts from "echarts";
import { useRef, useEffect, useState } from "react";
import { FormOutlined, BankOutlined, DollarOutlined } from "@ant-design/icons";
import { get } from "../../../apis/mainApi";
interface DataType {
  key: React.Key;
  id: any;
  num: number;
  money: number;
  overclass: number;
}

const Main = () => {
  const [data, setData] = useState([]);
  const [num, setNum] = useState([]);
  const [money, setMoney] = useState([]);
  const [overclass, setOverclass] = useState([]);
  /* 一上来请求数据 */
  useEffect(() => {
    getMain();
  }, []);
  const getMain = () => {
    get().then((res: { [propName: string]: any }) => {
      console.log(res);
      let _data = res.data.map((v: DataType[]) => {
        return { ...v };
      });
      setData(_data);
      setNum(_data[0].num);
      setMoney(_data[0].money);
      setOverclass(_data[0].overclass);
      console.log(data);
    });
  };

  const echart = useRef<HTMLDivElement>(null);
  const echart2 = useRef<HTMLDivElement>(null);
  useEffect(() => {
    const myChart = echarts.init(echart.current!);
    const myChart2 = echarts.init(echart2.current!);
    myChart.setOption({
      title: {
        text: "近7日缴费情况",
      },
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "shadow",
        },
      },
      legend: {
        data: ["缴费金额/元", "缴费笔数/笔"],
      },
      grid: {
        left: "3%",
        right: "4%",
        bottom: "3%",
        containLabel: true,
      },
      xAxis: [
        {
          type: "value",
        },
      ],
      yAxis: [
        {
          type: "category",
          axisTick: {
            show: false,
          },
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
      ],
      series: [
        {
          name: "缴费笔数/笔",
          type: "bar",
          stack: "Total",
          label: {
            show: true,
            position: "right",
          },
          emphasis: {
            focus: "series",
          },
          data: [10, 20, 30, 40, 50, 60, 70],
        },
        {
          name: "缴费金额/元",
          type: "bar",
          stack: "Total",
          label: {
            show: true,
            position: "right",
          },
          emphasis: {
            focus: "series",
          },
          data: [120, 132, 101, 134, 190, 200, 210],
        },
      ],
    });
    myChart2.setOption({
      tooltip: {
        trigger: "item",
      },
      legend: {
        top: "5%",
        left: "center",
      },
      series: [
        {
          name: "Access From",
          type: "pie",
          radius: ["40%", "70%"],
          avoidLabelOverlap: false,
          itemStyle: {
            borderRadius: 10,
            borderColor: "#fff",
            borderWidth: 2,
          },
          label: {
            show: false,
            position: "center",
          },
          emphasis: {
            label: {
              show: true,
              fontSize: "40",
              fontWeight: "bold",
            },
          },
          labelLine: {
            show: false,
          },
          data: [
            { value: 1048, name: "学校代收费" },
            { value: 735, name: "伙食费" },
            { value: 580, name: "班费" },
            { value: 484, name: "校服费" },
            { value: 300, name: "党费" },
          ],
        },
      ],
    });
  }, []);

  return (
    <div id="pad" className="home">
      <div className="top">
        <div className="top-item">
          <div className="top-item-left">
            <FormOutlined style={{ color: "#fff", fontSize: "36px" }} />
          </div>
          <div className="top-item-right">
            <span>今日缴费笔数</span>
            <span className="top-item-right-2">
              <h3>{num}</h3> 笔
            </span>
          </div>
        </div>
        <div className="top-item">
          <div className="top-item-left" style={{ background: "#f35556" }}>
            <DollarOutlined style={{ color: "#fff", fontSize: "36px" }} />
          </div>
          <div className="top-item-right">
            <span>今日缴费金额</span>
            <span className="top-item-right-2" style={{ color: "#f35556" }}>
              ￥ <h3>{money}</h3>
            </span>
          </div>
        </div>
        <div className="top-item">
          <div className="top-item-left" style={{ background: "#4dabe7" }}>
            <BankOutlined style={{ color: "#fff", fontSize: "36px" }} />
          </div>
          <div className="top-item-right">
            <span>已缴费完班级</span>
            <span className="top-item-right-2" style={{ color: "#4dabe7" }}>
              <h3>{overclass}</h3> 个
            </span>
          </div>
        </div>
      </div>
      <div className="bottom">
        <div className="bottom-left">
          <div ref={echart} className="echart"></div>
        </div>
        <div className="bottom-right">
          <div ref={echart2} className="echart2"></div>
        </div>
      </div>
    </div>
  );
};
export default Main;
